@(movies: List[Movie], selectedDate: String)(implicit lang: Lang)

@main("The Cult Cinema Inc. Showtime"){



	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("showtime")(lang)</li>
		        		</ul>
					</div>
				</div>
				<div class="row">

					<div class="span3">

						<div class="well" style="padding: 8px 0;">
							<div id="calender" align="center" data-date-format="dd-mm-yyyy" data-date="@selectedDate"></div>
						</div>
					</div>
					<div class="span9">
						@if(movies.isEmpty()){
							<div class="well" style="padding-bottom:0">
								<p class="unavailable text-info" align="center">
									@Messages("message.nosession")(lang)
								</p>
							</div>
						} else {
							@movies.map{ movie =>
								@listItem(movie,movie.sessions,false)(lang)
							}
						}
					</div>
				</div>
  			</section>

			<script>
				$.fn.datepicker.dates['zh-TW'] = {
					days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
					daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
					months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
					monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
					today: "今天"
				};

				$('#calender').datepicker({
					todayBtn: 'linked'@if(lang.code == "zh"){,language: "zh-TW"}
				}).on('changeDate', function(ev){
				    location.href="/assignment2/show/"+ev.date.getFullYear()+"/"+(ev.date.getMonth()+1)+"/"+ev.date.getDate()+"?lang=@lang.code";
				});
			</script>

}(lang)